<div class="selenium-notes">
<h1>CSS Selector in Selenium</h1>
<p><strong>CSS Selector</strong> is one of the most powerful and commonly used locator strategies in Selenium WebDriver. It allows automation testers to identify web elements using CSS patterns based on attributes such as ID, class, name, type, value, relationships, and combinations of multiple attributes.</p>
<p>CSS Selectors are especially useful when an element does not have a unique ID or when a tester needs a concise and readable locator. Selenium WebDriver supports CSS selectors through the <strong>By.cssSelector()</strong> method.</p>
<p>CSS selectors are an important part of Selenium WebDriver element location. JustAcademy's Selenium training curriculum specifically includes locating elements using <strong>ID, XPath, and CSS selectors</strong>, along with WebDriver commands, forms, buttons, dropdowns, and web elements. You can explore the <a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">JustAcademy's Selenium Training Course</a> and use the <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Course Demo</a> option for further learning information.</p>
<hr>
<h2>1. What is a CSS Selector?</h2>
<p>A CSS Selector is a pattern used to select HTML elements based on their tag name, ID, class, attributes, relationships, or combinations of these properties.</p>
<p>In Selenium, a CSS Selector is passed to the <code>By.cssSelector()</code> method.</p>
<pre><code>driver.findElement(By.cssSelector("selector"));</code></pre>
<p>For example:</p>
<pre><code>driver.findElement(By.cssSelector("#username"));</code></pre>
<p>This statement locates an element whose HTML <code>id</code> attribute is <code>username</code>.</p>
<hr>
<h2>2. Why CSS Selectors are Important in Selenium</h2>
<p>CSS Selectors provide a flexible way to locate web elements in automated tests. They are particularly useful when simple locators such as ID, Name, or Class Name are not sufficient.</p>
<ul>
<li>They can locate elements using IDs.</li>
<li>They can locate elements using class names.</li>
<li>They can locate elements using attributes.</li>
<li>They can combine multiple attributes.</li>
<li>They can identify child and descendant elements.</li>
<li>They can identify elements using tag and class combinations.</li>
<li>They can identify elements using attribute values.</li>
<li>They are useful for dynamic web pages.</li>
<li>They can create concise locators.</li>
<li>They are useful alternatives to XPath in many scenarios.</li>
</ul>
<hr>
<h2>3. Basic Syntax of CSS Selector in Selenium</h2>
<p>The basic syntax is:</p>
<pre><code>driver.findElement(By.cssSelector("CSS_SELECTOR"));</code></pre>
<p>For example:</p>
<pre><code>driver.findElement(By.cssSelector("#loginButton")).click();</code></pre>
<hr>
<h2>4. Required Selenium Imports</h2>
<pre><code>import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;</code></pre>
<hr>
<h2>5. Complete Basic Example</h2>
<pre><code>import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class CSSSelectorExample {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://example.com");
driver.findElement(
By.cssSelector("#login")
).click();
driver.quit();
}
}</code></pre>
<hr>
<h2>6. CSS Selector and HTML</h2>
<p>Consider the following HTML:</p>
<pre><code><input id="username" type="text" name="username"></code></pre>
<p>The ID-based CSS Selector is:</p>
<pre><code>#username</code></pre>
<p>Selenium code:</p>
<pre><code>driver.findElement(
By.cssSelector("#username")
).sendKeys("admin");</code></pre>
<hr>
<h2>7. CSS Selector Using ID</h2>
<p>The hash symbol <code>#</code> is used to select an element by its ID.</p>
<pre><code><input id="email" type="email"></code></pre>
<p>CSS Selector:</p>
<pre><code>#email</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector("#email")
).sendKeys("[email protected]");</code></pre>
<hr>
<h2>8. CSS Selector Using Class</h2>
<p>The dot <code>.</code> symbol is used to select an element by class.</p>
<pre><code><button class="login-button">Login</button></code></pre>
<p>CSS Selector:</p>
<pre><code>.login-button</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector(".login-button")
).click();</code></pre>
<hr>
<h2>9. CSS Selector Using Tag Name</h2>
<p>A CSS Selector can use an HTML tag directly.</p>
<pre><code><button>Login</button></code></pre>
<p>CSS Selector:</p>
<pre><code>button</code></pre>
<p>However, if many buttons exist on the page, the selector may not uniquely identify the desired button.</p>
<hr>
<h2>10. Tag and Class Combination</h2>
<p>You can combine an HTML tag and class name.</p>
<pre><code><button class="submit-button">Submit</button></code></pre>
<p>CSS Selector:</p>
<pre><code>button.submit-button</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector("button.submit-button")
).click();</code></pre>
<hr>
<h2>11. Tag and ID Combination</h2>
<pre><code><input id="username" type="text"></code></pre>
<p>CSS Selector:</p>
<pre><code>input#username</code></pre>
<p>Although <code>#username</code> is normally sufficient when the ID is unique, combining the tag and ID can make the selector more descriptive.</p>
<hr>
<h2>12. CSS Selector Using Name Attribute</h2>
<p>CSS selectors can locate an element using the <code>name</code> attribute.</p>
<pre><code><input name="username" type="text"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[name='username']</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector("input[name='username']")
).sendKeys("admin");</code></pre>
<hr>
<h2>13. CSS Selector Using Type Attribute</h2>
<pre><code><input type="password"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[type='password']</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector("input[type='password']")
).sendKeys("secret123");</code></pre>
<hr>
<h2>14. CSS Selector Using Value Attribute</h2>
<pre><code><input type="submit" value="Login"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[value='Login']</code></pre>
<hr>
<h2>15. CSS Selector Using Placeholder</h2>
<pre><code><input type="text" placeholder="Enter Username"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[placeholder='Enter Username']</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector("input[placeholder='Enter Username']")
).sendKeys("admin");</code></pre>
<hr>
<h2>16. CSS Selector Using Multiple Attributes</h2>
<p>Multiple attributes can be combined in a single CSS Selector.</p>
<pre><code><input type="text" name="username" placeholder="Enter Username"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[type='text'][name='username']</code></pre>
<p>Another example:</p>
<pre><code>input[type='text'][name='username'][placeholder='Enter Username']</code></pre>
<hr>
<h2>17. Why Use Multiple Attributes?</h2>
<p>Multiple attributes make a selector more specific when a single attribute matches several elements.</p>
<pre><code>input[name='username']</code></pre>
<p>If multiple elements have the same name, a more specific selector can be used:</p>
<pre><code>input[type='text'][name='username']</code></pre>
<hr>
<h2>18. CSS Selector Using Class with Attribute</h2>
<pre><code><input class="form-control" name="email" type="email"></code></pre>
<p>CSS Selector:</p>
<pre><code>input.form-control[name='email']</code></pre>
<hr>
<h2>19. CSS Selector for Multiple Classes</h2>
<p>Suppose an element contains multiple classes:</p>
<pre><code><button class="btn btn-primary submit">Submit</button></code></pre>
<p>CSS Selector:</p>
<pre><code>button.btn.btn-primary.submit</code></pre>
<p>Multiple class names are joined without spaces when they belong to the same element.</p>
<hr>
<h2>20. Important Difference Between Class and Descendant Selectors</h2>
<p>Consider:</p>
<pre><code>.container.button</code></pre>
<p>This means an element having both <code>container</code> and <code>button</code> classes.</p>
<p>Whereas:</p>
<pre><code>.container .button</code></pre>
<p>means an element with class <code>button</code> located inside an element with class <code>container</code>.</p>
<hr>
<h2>21. CSS Selector for Child Elements</h2>
<p>The <code>></code> symbol selects a direct child.</p>
<pre><code><div class="login-form">
<input type="text">
</div></code></pre>
<p>CSS Selector:</p>
<pre><code>div.login-form > input</code></pre>
<hr>
<h2>22. CSS Selector for Descendant Elements</h2>
<p>A space selects a descendant element at any level.</p>
<pre><code>div.login-form input</code></pre>
<p>This can locate an input inside the login form even if the input is nested deeper within the DOM.</p>
<hr>
<h2>23. Child Selector vs Descendant Selector</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Selector</th><th>Meaning</th></tr>
<tr><td><code>></code></td><td>Direct child</td></tr>
<tr><td>Space</td><td>Any descendant</td></tr>
<tr><td><code>+</code></td><td>Adjacent sibling</td></tr>
<tr><td><code>~</code></td><td>General sibling</td></tr>
</table>
<hr>
<h2>24. CSS Selector Using Descendant</h2>
<pre><code><div class="login">
<div class="form-group">
<input name="username">
</div>
</div></code></pre>
<p>CSS Selector:</p>
<pre><code>div.login input[name='username']</code></pre>
<hr>
<h2>25. CSS Selector Using Direct Child</h2>
<pre><code><div class="login">
<input name="username">
</div></code></pre>
<p>CSS Selector:</p>
<pre><code>div.login > input[name='username']</code></pre>
<hr>
<h2>26. CSS Selector Using Adjacent Sibling</h2>
<p>The <code>+</code> selector identifies an element immediately following another element.</p>
<pre><code><label>Username</label>
<input type="text"></code></pre>
<p>CSS Selector:</p>
<pre><code>label + input</code></pre>
<hr>
<h2>27. CSS Selector Using General Sibling</h2>
<p>The <code>~</code> selector identifies matching sibling elements that appear after the specified element.</p>
<pre><code>label ~ input</code></pre>
<hr>
<h2>28. CSS Selector Using Attribute Presence</h2>
<p>A CSS Selector can check whether an attribute exists.</p>
<pre><code><input type="text" required></code></pre>
<p>Selector:</p>
<pre><code>input[required]</code></pre>
<hr>
<h2>29. CSS Selector Using Attribute Equals</h2>
<p>The <code>=</code> operator matches an exact attribute value.</p>
<pre><code>input[type='text']</code></pre>
<p>This selects input elements whose type attribute exactly equals <code>text</code>.</p>
<hr>
<h2>30. CSS Selector Using Attribute Starts With</h2>
<p>The <code>^=</code> operator matches an attribute value that starts with a specified string.</p>
<pre><code><input id="user_12345"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[id^='user_']</code></pre>
<hr>
<h2>31. CSS Selector Using Attribute Ends With</h2>
<p>The <code>$=</code> operator matches an attribute value that ends with a specified string.</p>
<pre><code><input id="user_12345"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[id$='12345']</code></pre>
<hr>
<h2>32. CSS Selector Using Attribute Contains</h2>
<p>The <code>*=</code> operator matches an attribute value containing a specified substring.</p>
<pre><code><input id="user_12345"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[id*='user']</code></pre>
<hr>
<h2>33. CSS Attribute Selector Operators</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Operator</th><th>Purpose</th><th>Example</th></tr>
<tr><td><code>=</code></td><td>Exact match</td><td>input[name='email']</td></tr>
<tr><td><code>*=</code></td><td>Contains</td><td>input[id*='user']</td></tr>
<tr><td><code>^=</code></td><td>Starts with</td><td>input[id^='user_']</td></tr>
<tr><td><code>$=</code></td><td>Ends with</td><td>input[id$='_field']</td></tr>
<tr><td><code>~=</code></td><td>Contains a space-separated word</td><td>div[class~='active']</td></tr>
<tr><td><code>|=</code></td><td>Exact value or value followed by hyphen</td><td>div[lang|='en']</td></tr>
</table>
<hr>
<h2>34. CSS Selector for Dynamic ID</h2>
<p>Modern applications frequently generate dynamic IDs.</p>
<pre><code><input id="user_874923"></code></pre>
<p>If the stable portion is <code>user_</code>, use:</p>
<pre><code>input[id^='user_']</code></pre>
<p>Another example:</p>
<pre><code>input[id*='874']</code></pre>
<hr>
<h2>35. CSS Selector for Dynamic Class</h2>
<p>Suppose:</p>
<pre><code><button class="btn-submit-9384">Submit</button></code></pre>
<p>If the stable portion is <code>btn-submit</code>:</p>
<pre><code>button[class*='btn-submit']</code></pre>
<hr>
<h2>36. CSS Selector for Dynamic Name</h2>
<pre><code><input name="username_123"></code></pre>
<p>Selector:</p>
<pre><code>input[name^='username_']</code></pre>
<hr>
<h2>37. CSS Selector for Dynamic Attribute Values</h2>
<p>Attribute matching is useful when only part of an attribute value is stable.</p>
<pre><code>input[data-testid*='login']</code></pre>
<p>This can match an element whose <code>data-testid</code> contains <code>login</code>.</p>
<hr>
<h2>38. CSS Selector Using Data Attributes</h2>
<p>Modern web applications often use custom data attributes for automation.</p>
<pre><code><button data-testid="login-button">Login</button></code></pre>
<p>CSS Selector:</p>
<pre><code>button[data-testid='login-button']</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector("button[data-testid='login-button']")
).click();</code></pre>
<hr>
<h2>39. CSS Selector Using aria-label</h2>
<pre><code><button aria-label="Search">🔍</button></code></pre>
<p>CSS Selector:</p>
<pre><code>button[aria-label='Search']</code></pre>
<hr>
<h2>40. CSS Selector for Input Fields</h2>
<pre><code><input type="text" name="username">
<input type="password" name="password"></code></pre>
<p>Username:</p>
<pre><code>input[name='username']</code></pre>
<p>Password:</p>
<pre><code>input[name='password']</code></pre>
<hr>
<h2>41. CSS Selector for Buttons</h2>
<pre><code><button id="loginBtn">Login</button></code></pre>
<p>Selector:</p>
<pre><code>button#loginBtn</code></pre>
<p>Or:</p>
<pre><code>#loginBtn</code></pre>
<hr>
<h2>42. CSS Selector for Links</h2>
<pre><code><a href="/login">Login</a></code></pre>
<p>CSS Selector using tag and attribute:</p>
<pre><code>a[href='/login']</code></pre>
<hr>
<h2>43. CSS Selector for Links Using href</h2>
<p>The <code>href</code> attribute can be used to identify links.</p>
<pre><code>a[href='/courses']</code></pre>
<p>For an external URL:</p>
<pre><code>a[href='https://example.com']</code></pre>
<hr>
<h2>44. CSS Selector for Checkbox</h2>
<pre><code><input type="checkbox" name="terms"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[type='checkbox'][name='terms']</code></pre>
<p>Selenium:</p>
<pre><code>driver.findElement(
By.cssSelector("input[type='checkbox'][name='terms']")
).click();</code></pre>
<hr>
<h2>45. CSS Selector for Radio Button</h2>
<pre><code><input type="radio" name="gender" value="male"></code></pre>
<p>CSS Selector:</p>
<pre><code>input[type='radio'][value='male']</code></pre>
<hr>
<h2>46. CSS Selector for Dropdown</h2>
<pre><code><select id="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select></code></pre>
<p>CSS Selector:</p>
<pre><code>select#country</code></pre>
<hr>
<h2>47. CSS Selector for Dropdown Option</h2>
<pre><code>select#country option[value='india']</code></pre>
<p>This selector identifies the India option inside the country dropdown.</p>
<hr>
<h2>48. CSS Selector for Images</h2>
<pre><code><img src="/images/logo.png" alt="Company Logo"></code></pre>
<p>CSS Selector:</p>
<pre><code>img[alt='Company Logo']</code></pre>
<hr>
<h2>49. CSS Selector for Tables</h2>
<pre><code><table id="users">
<tr>
<td>John</td>
<td>[email protected]</td>
</tr>
</table></code></pre>
<p>Table selector:</p>
<pre><code>table#users</code></pre>
<hr>
<h2>50. CSS Selector for Table Rows</h2>
<pre><code>table#users tr</code></pre>
<p>This selects rows inside the users table.</p>
<hr>
<h2>51. CSS Selector for Table Cells</h2>
<pre><code>table#users tr td</code></pre>
<p>This selects cells inside rows of the users table.</p>
<hr>
<h2>52. CSS Selector for Specific Table Cell</h2>
<p>CSS provides positional selectors that can be used for simple table structures.</p>
<pre><code>table#users tr:nth-child(2) td:nth-child(1)</code></pre>
<p>However, for complex data-driven table relationships, XPath or programmatic row processing may be easier to maintain.</p>
<hr>
<h2>53. CSS Selector with nth-child()</h2>
<p><code>:nth-child()</code> can select an element based on its position among siblings.</p>
<pre><code>ul li:nth-child(2)</code></pre>
<p>This selects the second list item.</p>
<hr>
<h2>54. CSS Selector with nth-of-type()</h2>
<p><code>:nth-of-type()</code> selects an element based on its position among elements of the same tag type.</p>
<pre><code>div:nth-of-type(2)</code></pre>
<hr>
<h2>55. CSS Selector with first-child</h2>
<pre><code>ul li:first-child</code></pre>
<p>This selects the first <code>li</code> element that is the first child of its parent.</p>
<hr>
<h2>56. CSS Selector with last-child</h2>
<pre><code>ul li:last-child</code></pre>
<p>This selects the last child matching the structure.</p>
<hr>
<h2>57. CSS Selector with first-of-type</h2>
<pre><code>div:first-of-type</code></pre>
<hr>
<h2>58. CSS Selector with last-of-type</h2>
<pre><code>div:last-of-type</code></pre>
<hr>
<h2>59. CSS Selector with not()</h2>
<p>The <code>:not()</code> pseudo-class excludes matching elements.</p>
<pre><code>input:not([type='hidden'])</code></pre>
<p>This can select input elements whose type is not hidden.</p>
<hr>
<h2>60. CSS Selector with checked</h2>
<p>The <code>:checked</code> pseudo-class can identify checked radio buttons and checkboxes.</p>
<pre><code>input[type='checkbox']:checked</code></pre>
<p>Radio button example:</p>
<pre><code>input[type='radio']:checked</code></pre>
<hr>
<h2>61. CSS Selector for Enabled Elements</h2>
<p>The <code>:enabled</code> pseudo-class can identify enabled form controls.</p>
<pre><code>input:enabled</code></pre>
<hr>
<h2>62. CSS Selector for Disabled Elements</h2>
<p>The <code>:disabled</code> pseudo-class can identify disabled controls.</p>
<pre><code>input:disabled</code></pre>
<hr>
<h2>63. CSS Selector for Required Fields</h2>
<pre><code>input:required</code></pre>
<p>This can identify required input elements.</p>
<hr>
<h2>64. CSS Selector for Optional Fields</h2>
<pre><code>input:optional</code></pre>
<hr>
<h2>65. CSS Selector Using Multiple Conditions</h2>
<p>Multiple conditions can be combined without spaces when they refer to the same element.</p>
<pre><code>input.form-control[type='text'][name='username']</code></pre>
<hr>
<h2>66. CSS Selector Using Multiple Classes and Attributes</h2>
<pre><code>button.btn.primary[data-action='login']</code></pre>
<p>This identifies a button that has the classes <code>btn</code> and <code>primary</code> and a matching <code>data-action</code> attribute.</p>
<hr>
<h2>67. CSS Selector with Comma</h2>
<p>The comma allows multiple selectors to be grouped.</p>
<pre><code>input[type='text'], input[type='email']</code></pre>
<p>This matches both text and email input elements.</p>
<hr>
<h2>68. CSS Selector for Login Form</h2>
<pre><code><form id="loginForm">
<input name="username" type="text">
<input name="password" type="password">
<button type="submit">Login</button>
</form></code></pre>
<p>Username:</p>
<pre><code>form#loginForm input[name='username']</code></pre>
<p>Password:</p>
<pre><code>form#loginForm input[name='password']</code></pre>
<p>Button:</p>
<pre><code>form#loginForm button[type='submit']</code></pre>
<hr>
<h2>69. Complete Login Automation Using CSS Selectors</h2>
<pre><code>driver.findElement(
By.cssSelector("input[name='username']")
).sendKeys("admin");
driver.findElement(
By.cssSelector("input[name='password']")
).sendKeys("admin123");
driver.findElement(
By.cssSelector("button[type='submit']")
).click();</code></pre>
<hr>
<h2>70. CSS Selector for Registration Form</h2>
<pre><code>input[name='firstName']
input[name='lastName']
input[name='email']
input[name='password']
button[type='submit']</code></pre>
<p>These selectors can be used to automate registration form fields.</p>
<hr>
<h2>71. CSS Selector for Search Box</h2>
<pre><code><input id="search" type="search" placeholder="Search products"></code></pre>
<p>Selector:</p>
<pre><code>input#search</code></pre>
<p>Or:</p>
<pre><code>input[placeholder='Search products']</code></pre>
<hr>
<h2>72. CSS Selector for Search Button</h2>
<pre><code><button class="search-btn" type="submit">Search</button></code></pre>
<p>Selector:</p>
<pre><code>button.search-btn</code></pre>
<hr>
<h2>73. CSS Selector for E-Commerce Product Card</h2>
<pre><code><div class="product-card" data-product-id="101">
<h3 class="product-name">Laptop</h3>
<button class="add-cart">Add to Cart</button>
</div></code></pre>
<p>Product card:</p>
<pre><code>div.product-card[data-product-id='101']</code></pre>
<p>Add to Cart button:</p>
<pre><code>div.product-card[data-product-id='101'] button.add-cart</code></pre>
<hr>
<h2>74. CSS Selector for Product Names</h2>
<pre><code>div.product-card .product-name</code></pre>
<p>This selects product names within product cards.</p>
<hr>
<h2>75. CSS Selector for Navigation Menu</h2>
<pre><code><nav class="main-menu">
<a href="/home">Home</a>
<a href="/courses">Courses</a>
<a href="/contact">Contact</a>
</nav></code></pre>
<p>All navigation links:</p>
<pre><code>nav.main-menu a</code></pre>
<p>Courses link:</p>
<pre><code>nav.main-menu a[href='/courses']</code></pre>
<hr>
<h2>76. CSS Selector for Footer</h2>
<pre><code>footer a</code></pre>
<p>This identifies links inside the footer.</p>
<hr>
<h2>77. CSS Selector for Modal</h2>
<pre><code><div class="modal" id="loginModal">
<input name="username">
</div></code></pre>
<p>Username inside modal:</p>
<pre><code>div#loginModal input[name='username']</code></pre>
<hr>
<h2>78. CSS Selector for Alert Messages</h2>
<pre><code><div class="alert alert-success">Login successful</div></code></pre>
<p>Selector:</p>
<pre><code>div.alert.alert-success</code></pre>
<hr>
<h2>79. CSS Selector for Error Message</h2>
<pre><code><div class="error-message">Invalid password</div></code></pre>
<p>Selector:</p>
<pre><code>div.error-message</code></pre>
<hr>
<h2>80. CSS Selector for Specific Form Section</h2>
<pre><code><section id="billing">
<input name="city">
</section></code></pre>
<p>Selector:</p>
<pre><code>section#billing input[name='city']</code></pre>
<hr>
<h2>81. CSS Selector with WebDriver findElement()</h2>
<p>The most common usage is:</p>
<pre><code>WebElement element = driver.findElement(
By.cssSelector("#username")
);</code></pre>
<p>Then an action can be performed:</p>
<pre><code>element.sendKeys("admin");</code></pre>
<hr>
<h2>82. CSS Selector with findElements()</h2>
<p><code>findElements()</code> returns a list of matching elements.</p>
<pre><code>List<WebElement> buttons = driver.findElements(
By.cssSelector("button")
);</code></pre>
<hr>
<h2>83. Count Elements Using CSS Selector</h2>
<pre><code>List<WebElement> links = driver.findElements(
By.cssSelector("nav a")
);
System.out.println(
"Number of links: " + links.size()
);</code></pre>
<hr>
<h2>84. Loop Through CSS Selector Results</h2>
<pre><code>List<WebElement> links = driver.findElements(
By.cssSelector("nav a")
);
for (WebElement link : links) {
System.out.println(link.getText());
}</code></pre>
<hr>
<h2>85. CSS Selector with Explicit Wait</h2>
<pre><code>WebDriverWait wait =
new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement loginButton = wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector("button[type='submit']")
)
);
loginButton.click();</code></pre>
<hr>
<h2>86. Required Imports for Explicit Wait</h2>
<pre><code>import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;</code></pre>
<hr>
<h2>87. CSS Selector with Presence Wait</h2>
<pre><code>WebElement element = wait.until(
ExpectedConditions.presenceOfElementLocated(
By.cssSelector("#dashboard")
)
);</code></pre>
<hr>
<h2>88. CSS Selector with Visibility Wait</h2>
<pre><code>WebElement element = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".dashboard")
)
);</code></pre>
<hr>
<h2>89. CSS Selector with Clickable Wait</h2>
<pre><code>WebElement element = wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector("button.login")
)
);
element.click();</code></pre>
<hr>
<h2>90. CSS Selector and Implicit Wait</h2>
<pre><code>driver.manage().timeouts().implicitlyWait(
Duration.ofSeconds(10)
);</code></pre>
<p>After configuring the implicit wait, CSS Selectors can be used normally with <code>findElement()</code>.</p>
<hr>
<h2>91. CSS Selector and Dynamic Web Applications</h2>
<p>Dynamic applications often generate changing IDs, classes, and other attributes. CSS attribute operators can help create selectors based on stable portions.</p>
<pre><code>input[id^='user_']
button[class*='submit']
div[data-testid='login-panel']</code></pre>
<hr>
<h2>92. CSS Selector for React Applications</h2>
<p>React applications often generate dynamic class names. When available, stable attributes such as <code>data-testid</code>, <code>aria-label</code>, or stable IDs can provide clearer CSS Selectors.</p>
<pre><code>button[data-testid='login-button']</code></pre>
<hr>
<h2>93. CSS Selector for Angular Applications</h2>
<p>Angular applications may contain framework-generated attributes and dynamic DOM structures. Prefer stable application-specific attributes where possible.</p>
<pre><code>input[formcontrolname='username']</code></pre>
<hr>
<h2>94. CSS Selector for Accessibility Attributes</h2>
<pre><code>button[aria-label='Close']</code></pre>
<p>Accessibility attributes can sometimes provide stable and meaningful selectors when they are intentionally maintained by the application.</p>
<hr>
<h2>95. CSS Selector for FormControlName</h2>
<pre><code><input formcontrolname="email" type="email"></code></pre>
<p>Selector:</p>
<pre><code>input[formcontrolname='email']</code></pre>
<hr>
<h2>96. CSS Selector for Data-Test Attributes</h2>
<pre><code><button data-test="submit-button">Submit</button></code></pre>
<p>Selector:</p>
<pre><code>button[data-test='submit-button']</code></pre>
<hr>
<h2>97. CSS Selector in Page Object Model</h2>
<p>CSS Selectors are frequently stored as <code>By</code> objects in Page Object Model classes.</p>
<pre><code>public class LoginPage {
private WebDriver driver;
private By username =
By.cssSelector("input[name='username']");
private By password =
By.cssSelector("input[name='password']");
private By loginButton =
By.cssSelector("button[type='submit']");
public LoginPage(WebDriver driver) {
this.driver = driver;
}
public void login(String user, String pass) {
driver.findElement(username).sendKeys(user);
driver.findElement(password).sendKeys(pass);
driver.findElement(loginButton).click();
}
}</code></pre>
<hr>
<h2>98. Reusable CSS Selector Utility</h2>
<pre><code>public WebElement findByCss(String selector) {
return driver.findElement(
By.cssSelector(selector)
);
}</code></pre>
<p>Usage:</p>
<pre><code>findByCss("#username").sendKeys("admin");</code></pre>
<hr>
<h2>99. Reusable Click Method</h2>
<pre><code>public void clickByCss(String selector) {
driver.findElement(
By.cssSelector(selector)
).click();
}</code></pre>
<p>Usage:</p>
<pre><code>clickByCss("button.login");</code></pre>
<hr>
<h2>100. Reusable Send Keys Method</h2>
<pre><code>public void typeByCss(String selector, String text) {
driver.findElement(
By.cssSelector(selector)
).sendKeys(text);
}</code></pre>
<hr>
<h2>101. CSS Selector and Page Object Best Practice</h2>
<p>Keep CSS Selectors centralized inside page classes instead of writing long selectors repeatedly throughout test methods.</p>
<pre><code>private final By emailField =
By.cssSelector("input[name='email']");</code></pre>
<hr>
<h2>102. CSS Selector and TestNG</h2>
<pre><code>import org.testng.Assert;
import org.testng.annotations.Test;
@Test
public void verifyLoginButton() {
WebElement button = driver.findElement(
By.cssSelector("button[type='submit']")
);
Assert.assertTrue(button.isDisplayed());
}</code></pre>
<hr>
<h2>103. CSS Selector for Test Validation</h2>
<pre><code>WebElement message = driver.findElement(
By.cssSelector(".success-message")
);
Assert.assertTrue(
message.isDisplayed()
);</code></pre>
<hr>
<h2>104. CSS Selector for Error Validation</h2>
<pre><code>WebElement error = driver.findElement(
By.cssSelector(".error-message")
);
Assert.assertTrue(error.isDisplayed());</code></pre>
<hr>
<h2>105. CSS Selector for Checked Checkbox</h2>
<pre><code>WebElement checkbox = driver.findElement(
By.cssSelector("input[type='checkbox']:checked")
);</code></pre>
<p>This can be useful for verifying that at least one matching checkbox is currently checked.</p>
<hr>
<h2>106. CSS Selector for Selected Radio Button</h2>
<pre><code>WebElement radio = driver.findElement(
By.cssSelector("input[type='radio']:checked")
);</code></pre>
<hr>
<h2>107. CSS Selector for Active Navigation Item</h2>
<pre><code>nav a.active</code></pre>
<p>This selects a navigation link having the <code>active</code> class.</p>
<hr>
<h2>108. CSS Selector for Hidden Elements</h2>
<p>CSS Selectors identify elements in the DOM but do not automatically make hidden elements interactable.</p>
<pre><code>input[type='hidden']</code></pre>
<p>If an element is hidden, Selenium interaction may require waiting for it to become visible or using an appropriate application-level interaction.</p>
<hr>
<h2>109. CSS Selector and ElementClickInterceptedException</h2>
<p>If another element overlaps the target element, a click may result in <code>ElementClickInterceptedException</code>.</p>
<p>Possible solutions include:</p>
<ul>
<li>Wait for the blocking overlay to disappear.</li>
<li>Wait until the target is clickable.</li>
<li>Scroll the element into view when appropriate.</li>
<li>Handle modal dialogs or popups.</li>
</ul>
<hr>
<h2>110. CSS Selector and NoSuchElementException</h2>
<p>If the selector does not match an element, Selenium can throw <code>NoSuchElementException</code>.</p>
<p>Check:</p>
<ul>
<li>Selector syntax.</li>
<li>Attribute values.</li>
<li>Current page.</li>
<li>Iframe context.</li>
<li>Dynamic loading.</li>
<li>Whether the element actually exists.</li>
</ul>
<hr>
<h2>111. CSS Selector and StaleElementReferenceException</h2>
<p>If the DOM is refreshed or an element is replaced after it has been located, the previously stored WebElement can become stale.</p>
<p>In such situations, locate the element again.</p>
<hr>
<h2>112. CSS Selector and iframe</h2>
<p>If the target element is inside an iframe, switch to that iframe before using the CSS Selector.</p>
<pre><code>driver.switchTo().frame("loginFrame");
driver.findElement(
By.cssSelector("input[name='username']")
).sendKeys("admin");
driver.switchTo().defaultContent();</code></pre>
<hr>
<h2>113. CSS Selector and Nested iframe</h2>
<pre><code>driver.switchTo().frame("outerFrame");
driver.switchTo().frame("innerFrame");
driver.findElement(
By.cssSelector("#username")
).sendKeys("admin");
driver.switchTo().defaultContent();</code></pre>
<hr>
<h2>114. CSS Selector and Shadow DOM</h2>
<p>CSS Selectors can be used within an appropriate Shadow Root context, but Selenium must first access the shadow root. A normal document-level CSS search does not automatically cross a shadow DOM boundary.</p>
<hr>
<h2>115. CSS Selector vs ID Locator</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Feature</th><th>ID</th><th>CSS Selector</th></tr>
<tr><td>Syntax</td><td>By.id()</td><td>By.cssSelector()</td></tr>
<tr><td>Complexity</td><td>Simple</td><td>Flexible</td></tr>
<tr><td>Attribute matching</td><td>Limited to ID</td><td>Multiple attributes supported</td></tr>
<tr><td>Relationships</td><td>Not directly supported</td><td>Parent/child/sibling CSS patterns supported</td></tr>
<tr><td>Dynamic attributes</td><td>Limited</td><td>Attribute operators available</td></tr>
</table>
<hr>
<h2>116. CSS Selector vs Name Locator</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Feature</th><th>Name</th><th>CSS Selector</th></tr>
<tr><td>Method</td><td>By.name()</td><td>By.cssSelector()</td></tr>
<tr><td>Based on</td><td>name attribute</td><td>CSS pattern</td></tr>
<tr><td>Multiple conditions</td><td>Limited</td><td>Supported</td></tr>
<tr><td>Dynamic matching</td><td>Limited</td><td>Supported with attribute operators</td></tr>
</table>
<hr>
<h2>117. CSS Selector vs Class Name</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Feature</th><th>Class Name</th><th>CSS Selector</th></tr>
<tr><td>Method</td><td>By.className()</td><td>By.cssSelector()</td></tr>
<tr><td>Single class</td><td>Easy</td><td>Easy</td></tr>
<tr><td>Multiple classes</td><td>Limited</td><td>Supported</td></tr>
<tr><td>Attributes</td><td>No</td><td>Yes</td></tr>
<tr><td>Relationships</td><td>No</td><td>Yes</td></tr>
</table>
<hr>
<h2>118. CSS Selector vs XPath</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Feature</th><th>CSS Selector</th><th>XPath</th></tr>
<tr><td>Syntax</td><td>CSS-based</td><td>XPath-based</td></tr>
<tr><td>ID/Class</td><td>Excellent</td><td>Excellent</td></tr>
<tr><td>Attribute matching</td><td>Excellent</td><td>Excellent</td></tr>
<tr><td>Parent/child relationships</td><td>Supported</td><td>Supported</td></tr>
<tr><td>Text matching</td><td>Limited compared with XPath</td><td>Strong</td></tr>
<tr><td>Sibling relationships</td><td>Supported</td><td>Supported</td></tr>
<tr><td>Complex DOM navigation</td><td>Can be less expressive</td><td>Highly expressive</td></tr>
<tr><td>Readability</td><td>Often concise</td><td>Can become longer</td></tr>
</table>
<hr>
<h2>119. When to Prefer CSS Selector</h2>
<ul>
<li>When an element has a stable ID or class.</li>
<li>When attribute-based matching is sufficient.</li>
<li>When a concise locator is preferred.</li>
<li>When using combinations of classes and attributes.</li>
<li>When identifying descendants or direct children.</li>
<li>When dealing with dynamic attribute values using <code>*=</code>, <code>^=</code>, or <code>$=</code>.</li>
</ul>
<hr>
<h2>120. When XPath May Be More Suitable</h2>
<ul>
<li>When matching complex visible text is required.</li>
<li>When advanced DOM relationships are needed.</li>
<li>When CSS cannot express the required relationship conveniently.</li>
<li>When an element needs to be located based on surrounding text or a related element.</li>
</ul>
<hr>
<h2>121. Common CSS Selector Mistakes</h2>
<ul>
<li>Using an incorrect ID.</li>
<li>Using an incorrect class name.</li>
<li>Forgetting the <code>#</code> for an ID selector.</li>
<li>Forgetting the <code>.</code> for a class selector.</li>
<li>Using a space when classes belong to the same element.</li>
<li>Using a descendant selector when a direct-child selector was intended.</li>
<li>Creating selectors that match multiple elements.</li>
<li>Depending on dynamically generated class names.</li>
<li>Ignoring iframe boundaries.</li>
<li>Ignoring asynchronous page loading.</li>
</ul>
<hr>
<h2>122. Common Mistake: Incorrect ID Syntax</h2>
<p>HTML:</p>
<pre><code><input id="username"></code></pre>
<p>Correct:</p>
<pre><code>#username</code></pre>
<p>Incorrect:</p>
<pre><code>.username</code></pre>
<hr>
<h2>123. Common Mistake: Incorrect Class Syntax</h2>
<p>HTML:</p>
<pre><code><button class="login-button">Login</button></code></pre>
<p>Correct:</p>
<pre><code>.login-button</code></pre>
<p>Incorrect:</p>
<pre><code>#login-button</code></pre>
<hr>
<h2>124. Common Mistake: Space Between Classes</h2>
<p>HTML:</p>
<pre><code><button class="btn primary">Submit</button></code></pre>
<p>To select the same element having both classes:</p>
<pre><code>button.btn.primary</code></pre>
<p>Using:</p>
<pre><code>button.btn .primary</code></pre>
<p>means an element with class <code>primary</code> inside an element with class <code>btn</code>, which is a different structure.</p>
<hr>
<h2>125. Common Mistake: Overly Long CSS Selectors</h2>
<p>Avoid unnecessarily depending on the complete DOM hierarchy.</p>
<pre><code>html body div.container div.row div.col-md-6 form div.form-group input.form-control</code></pre>
<p>A shorter stable selector may be preferable:</p>
<pre><code>input[name='username']</code></pre>
<hr>
<h2>126. Common Mistake: Using Dynamic Classes</h2>
<p>Some frameworks generate classes that may change between builds or sessions.</p>
<pre><code>.css-1a2b3c4</code></pre>
<p>If the class is not stable, prefer a stable application attribute such as:</p>
<pre><code>[data-testid='username']</code></pre>
<hr>
<h2>127. Best Practices for CSS Selectors</h2>
<ul>
<li>Prefer stable and meaningful attributes.</li>
<li>Use unique IDs when they are reliable.</li>
<li>Use data-test or data-testid attributes when intentionally provided for automation.</li>
<li>Avoid fragile selectors based on deep DOM hierarchy.</li>
<li>Avoid randomly generated classes.</li>
<li>Combine attributes when necessary for uniqueness.</li>
<li>Use attribute operators for dynamic values.</li>
<li>Use explicit waits for dynamically loaded elements.</li>
<li>Keep selectors readable.</li>
<li>Store selectors in Page Object classes.</li>
<li>Validate selectors in browser Developer Tools.</li>
</ul>
<hr>
<h2>128. CSS Selector Debugging in Browser Developer Tools</h2>
<p>Modern browsers allow testers to inspect elements and test CSS selectors through Developer Tools.</p>
<p>A useful workflow is:</p>
<pre><code>Open Web Page
↓
Right Click Element
↓
Select Inspect
↓
Identify HTML Element
↓
Find Stable ID/Class/Attribute
↓
Create CSS Selector
↓
Test Selector in Developer Tools
↓
Use Selector in Selenium</code></pre>
<hr>
<h2>129. Testing CSS Selector in Console</h2>
<p>Browser Developer Tools can be used to test a CSS Selector with <code>document.querySelector()</code>.</p>
<pre><code>document.querySelector("#username")</code></pre>
<p>For multiple matching elements:</p>
<pre><code>document.querySelectorAll("input")</code></pre>
<p>This is useful for verifying whether a selector matches the intended element before using it in Selenium.</p>
<hr>
<h2>130. CSS Selector Interview Questions</h2>
<h3>Q1. What is a CSS Selector in Selenium?</h3>
<p>A CSS Selector is a pattern used by Selenium WebDriver to identify web elements based on CSS-style rules such as ID, class, attributes, relationships, and positional selectors.</p>
<h3>Q2. What method is used for CSS Selector?</h3>
<pre><code>By.cssSelector()</code></pre>
<h3>Q3. How do you locate an element by ID using CSS Selector?</h3>
<pre><code>driver.findElement(By.cssSelector("#username"));</code></pre>
<h3>Q4. How do you locate an element by class?</h3>
<pre><code>driver.findElement(By.cssSelector(".login-button"));</code></pre>
<h3>Q5. How do you locate an element using an attribute?</h3>
<pre><code>driver.findElement(
By.cssSelector("input[name='username']")
);</code></pre>
<h3>Q6. How do you match a partial attribute value?</h3>
<pre><code>input[id*='user']</code></pre>
<h3>Q7. What does ^= mean?</h3>
<p><code>^=</code> matches an attribute value that starts with a specified string.</p>
<h3>Q8. What does $= mean?</h3>
<p><code>$=</code> matches an attribute value that ends with a specified string.</p>
<h3>Q9. What does *= mean?</h3>
<p><code>*=</code> matches an attribute value that contains a specified string.</p>
<h3>Q10. How do you select a direct child?</h3>
<pre><code>parent > child</code></pre>
<h3>Q11. How do you select a descendant?</h3>
<pre><code>parent child</code></pre>
<h3>Q12. How do you select a checked checkbox?</h3>
<pre><code>input[type='checkbox']:checked</code></pre>
<h3>Q13. Can CSS Selector be used with findElements()?</h3>
<p>Yes.</p>
<pre><code>driver.findElements(
By.cssSelector("button")
);</code></pre>
<h3>Q14. Can CSS Selectors handle dynamic IDs?</h3>
<p>Yes, stable portions of dynamic attributes can be matched using CSS attribute operators.</p>
<pre><code>input[id^='user_']</code></pre>
<h3>Q15. CSS Selector or XPath?</h3>
<p>The choice depends on the DOM structure and the locator requirement. CSS Selectors are concise and powerful for attributes, classes, IDs, and CSS relationships, while XPath provides additional flexibility for text and more complex DOM navigation.</p>
<hr>
<h2>131. Practical Project: CSS Selector Based Login Automation</h2>
<p>Consider a login page:</p>
<pre><code><form id="loginForm">
<input id="username" name="username" type="text">
<input id="password" name="password" type="password">
<button class="login-btn" type="submit">Login</button>
</form></code></pre>
<p>Automation:</p>
<pre><code>driver.findElement(
By.cssSelector("#username")
).sendKeys("admin");
driver.findElement(
By.cssSelector("#password")
).sendKeys("admin123");
driver.findElement(
By.cssSelector("button.login-btn")
).click();</code></pre>
<hr>
<h2>132. Practical Project: Registration Form Automation</h2>
<pre><code>driver.findElement(
By.cssSelector("input[name='firstName']")
).sendKeys("John");
driver.findElement(
By.cssSelector("input[name='lastName']")
).sendKeys("Smith");
driver.findElement(
By.cssSelector("input[type='email']")
).sendKeys("[email protected]");
driver.findElement(
By.cssSelector("input[type='password']")
).sendKeys("Password123");
driver.findElement(
By.cssSelector("button[type='submit']")
).click();</code></pre>
<hr>
<h2>133. Practical Project: E-Commerce Automation</h2>
<pre><code>driver.findElement(
By.cssSelector("input[placeholder='Search products']")
).sendKeys("Laptop");
driver.findElement(
By.cssSelector("button.search-btn")
).click();
driver.findElement(
By.cssSelector("button.add-cart")
).click();</code></pre>
<hr>
<h2>134. Practical Project: Navigation Automation</h2>
<pre><code>driver.findElement(
By.cssSelector("nav.main-menu a[href='/courses']")
).click();</code></pre>
<hr>
<h2>135. Practical Project: Checkbox Validation</h2>
<pre><code>WebElement terms = driver.findElement(
By.cssSelector("input[type='checkbox'][name='terms']")
);
if (!terms.isSelected()) {
terms.click();
}</code></pre>
<hr>
<h2>136. Practical Project: Radio Button Validation</h2>
<pre><code>WebElement male = driver.findElement(
By.cssSelector("input[type='radio'][value='male']")
);
if (!male.isSelected()) {
male.click();
}</code></pre>
<hr>
<h2>137. Practical Project: Verify Selected Radio Button</h2>
<pre><code>WebElement selected = driver.findElement(
By.cssSelector("input[type='radio']:checked")
);
System.out.println(
"Selected value: " +
selected.getAttribute("value")
);</code></pre>
<hr>
<h2>138. Practical Project: Table Automation</h2>
<pre><code>List<WebElement> rows = driver.findElements(
By.cssSelector("table#users tbody tr")
);
for (WebElement row : rows) {
System.out.println(row.getText());
}</code></pre>
<hr>
<h2>139. Practical Project: Dynamic Product Cards</h2>
<pre><code>List<WebElement> products = driver.findElements(
By.cssSelector("div.product-card")
);
for (WebElement product : products) {
System.out.println(product.getText());
}</code></pre>
<hr>
<h2>140. CSS Selector Automation Flow</h2>
<pre><code>Launch Browser
↓
Open Application
↓
Inspect DOM
↓
Identify Stable Attribute
↓
Create CSS Selector
↓
Validate Selector
↓
Use By.cssSelector()
↓
Locate WebElement
↓
Perform Action
↓
Validate Result
↓
Continue Test
↓
Close Browser</code></pre>
<hr>
<h2>141. CSS Selector Quick Reference</h2>
<table border="1" cellpadding="8" cellspacing="0">
<tr><th>Requirement</th><th>CSS Selector</th></tr>
<tr><td>ID</td><td>#username</td></tr>
<tr><td>Class</td><td>.login-button</td></tr>
<tr><td>Tag</td><td>input</td></tr>
<tr><td>Tag + Class</td><td>button.login-button</td></tr>
<tr><td>Tag + ID</td><td>input#username</td></tr>
<tr><td>Name</td><td>input[name='username']</td></tr>
<tr><td>Type</td><td>input[type='password']</td></tr>
<tr><td>Exact Attribute</td><td>input[name='email']</td></tr>
<tr><td>Contains Attribute</td><td>input[id*='user']</td></tr>
<tr><td>Starts With</td><td>input[id^='user_']</td></tr>
<tr><td>Ends With</td><td>input[id$='_field']</td></tr>
<tr><td>Direct Child</td><td>form > input</td></tr>
<tr><td>Descendant</td><td>form input</td></tr>
<tr><td>Adjacent Sibling</td><td>label + input</td></tr>
<tr><td>General Sibling</td><td>label ~ input</td></tr>
<tr><td>First Child</td><td>li:first-child</td></tr>
<tr><td>Last Child</td><td>li:last-child</td></tr>
<tr><td>Checked</td><td>input:checked</td></tr>
<tr><td>Disabled</td><td>input:disabled</td></tr>
<tr><td>Enabled</td><td>input:enabled</td></tr>
<tr><td>Not</td><td>input:not([type='hidden'])</td></tr>
</table>
<hr>
<h2>142. CSS Selector Best-Practice Checklist</h2>
<ul>
<li>Use stable IDs whenever appropriate.</li>
<li>Use stable class names rather than generated classes.</li>
<li>Prefer dedicated test attributes such as <code>data-testid</code> when available.</li>
<li>Use multiple attributes when one attribute is not unique.</li>
<li>Use <code>^=</code>, <code>*=</code>, and <code>$=</code> for stable portions of dynamic attributes.</li>
<li>Avoid unnecessarily long DOM paths.</li>
<li>Avoid selectors that depend on fragile page structure.</li>
<li>Check whether the selector matches exactly the intended element.</li>
<li>Use explicit waits for dynamic elements.</li>
<li>Use Page Object Model for reusable selectors.</li>
<li>Use CSS Selector or XPath according to the actual locator requirement.</li>
</ul>
<hr>
<h2>143. Final Conclusion</h2>
<p>CSS Selector is a powerful Selenium locator strategy that allows testers to identify web elements using IDs, classes, tags, attributes, attribute patterns, child relationships, sibling relationships, and pseudo-classes. The basic Selenium syntax is <code>By.cssSelector()</code>.</p>
<p>A good CSS Selector should be <strong>unique, stable, readable, maintainable, and resistant to unnecessary UI changes</strong>. Simple selectors such as IDs and classes are useful when stable, while attribute operators and structural selectors are helpful for dynamic applications.</p>
<p>CSS Selectors are particularly valuable for Selenium automation involving login forms, registration forms, navigation menus, buttons, checkboxes, radio buttons, dropdowns, tables, e-commerce applications, dashboards, and dynamic web applications.</p>
<p>For structured Selenium learning covering WebDriver, locators, CSS selectors, XPath, web elements, forms, TestNG, Page Object Model, dynamic elements, and practical automation projects, explore the <a href="https://www.justacademy.co/course-detail/selenium-training" target="_blank" rel="noopener noreferrer">JustAcademy's Selenium Training Course</a>.</p>
<p>For additional information and course demonstration options, visit the <a href="https://www.justacademy.co/register-for-course-demo" target="_blank" rel="noopener noreferrer">Register for Course Demo</a> page.</p>
</div>
